<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<html:xhtml />
<script type="text/javascript">
    function showLdPlot(cohort) {
        var image = new Image();
        image.src ='<html:rewrite page="/images/ldPlots/" />' + cohort + '/' + cohort + '_Asthma_<bean:write name="geneSummaryForm" property="geneName"/>.LD.PNG';
        image.alt = cohort;
        $("#ldPlotModal").empty();
        $("#ldPlotModal").append(image);
        $("#ldPlotModal").dialog("option", "title", cohort);
        $("#ldPlotModal").dialog("option", "height", 'auto');
        $("#ldPlotModal").dialog("open");
    }

    $(document).ready(function() {
        // 'DataTablize' the table
        $("table").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                {"sType": "html"},
                {"sType": "numeric" },
                {"sType": "numeric" },
                null, null, null,
                {"bSearchable": false},
                {"bSearchable": false},
                {"bSearchable": false}]
        });

        $("#links").accordion();

        $("#ldPlotModal").dialog({
            autoOpen: false,
            modal: true,
            position: 'top'
        });
    });
</script>
<div id="geneSummary" class="content list summary">
    <html:form action="searchSubmit">
        <div class="input">
            <dl>
                <dt>Search Gene:</dt>
                <dd><html:text property="searchText" />&nbsp;<html:submit property="submitType" value="Search" /></dd>
            </dl>
            <html:hidden property="searchSelect" value="2" />
        </div>
    </html:form>
    <h2>
        <bean:write name="geneSummaryForm" property="geneName" />
    </h2>
    <div id="firstRow">
        <div id="links" class="links">
            <logic:notEmpty name="geneSummaryForm" property="geneLinks">
                <h3>
                    <a href="#">Gene Links</a>
                </h3>
                <ul>
                    <logic:iterate id="link" name="geneSummaryForm" property="geneLinks">
                        <li>
                            <a href='<bean:write name="link" property="url"/>' target="new">
                                <bean:write name="link" property="name"/>
                            </a>
                        </li>
                    </logic:iterate>
                </ul>
            </logic:notEmpty>
            <logic:notEmpty name="geneSummaryForm" property="pathwayLinks">
                <h3>
                    <a href="#">Kegg Pathways</a>
                </h3>
                <ul>
                    <logic:iterate id="link" name="geneSummaryForm" property="pathwayLinks">
                        <li>
                            <a href='<bean:write name="link" property="url" />' target="_blank" title='<bean:write name="link" property="title" />' >
                                <bean:write name="link" property="name" />
                            </a>
                        </li>
                    </logic:iterate>
                </ul>
            </logic:notEmpty>
        </div>
        <div id="genInfo" class="input main">
            <h3 class="ui-helper-reset ui-state-active ui-corner-all">
                General Information
            </h3>
            <dl>
                <dt>Gene:</dt>
                <dd><bean:write name="geneSummaryForm" property="geneName" /></dd>
                <dt>Gene Alias:</dt>
                <dd><bean:write name="geneSummaryForm" property="geneAliases" /></dd>
                <dt>Chromosome:</dt>
                <dd><bean:write name="geneSummaryForm" property="chromosome" /></dd>
            </dl>
        </div>
    </div>
    <div id="snpTableDiv" class="main">
        <h3 class="ui-helper-reset ui-state-active ui-corner-all">
            SNPs
        </h3>
        <table cellpadding="0" cellspacing="0" border="0" class="display">
            <thead>
                <tr>
                    <!-- GOTCHA: Manually adding 'ui-state-default' classes to match appearance.
                                 NOTE: There were couple old forum threads that stated that dataTable cannot
                                 handle multiple th's in a row. This table, with two th's in each column seems
                                 to be working now. However, this might cause a problem in future changes. -->
                    <td colspan="7" class="ui-state-default">&nbsp;</td>
                    <th colspan="<bean:write name="geneSummaryForm" property="cohortListSize"/>" class="ui-state-default">Genotyping Status</th>
                </tr>
                <tr>
                    <th>RS number</th>
                    <th>Gene</th>
                    <th>Chromosome</th>
                    <th>Position</th>
                    <th>Major Allele</th>
                    <th>Minor Allele</th>
                    <th>Function</th>
                    <logic:iterate id="cohort" name="geneSummaryForm" property="cohortList">
                        <th><bean:write name="cohort" property="name"/></th>
                    </logic:iterate>
                </tr>
            </thead>
            <tbody>
                <logic:iterate id="snpInfo" name="geneSummaryForm" property="snpList">
                    <tr>
                        <td>
                            <a href="<html:rewrite page="/snpSummary.do" />?rsNumber=<bean:write name="snpInfo" property="snp.rsNumber"/>">
                                <bean:write name="snpInfo" property="snp.rsNumber"/>
                            </a>
                        </td>
                        <td>
                            <a href="geneSummary.do?geneName=<bean:write name="snpInfo" property="snp.gene.name"/>">
                                <bean:write name="snpInfo" property="snp.gene.name"/>
                            </a>
                        </td>
                        <td><bean:write name="snpInfo" property="snp.chromosome"/></td>
                        <td><bean:write name="snpInfo" property="snp.position"/></td>
                        <td><bean:write name="snpInfo" property="snp.majorAllele"/></td>
                        <td><bean:write name="snpInfo" property="snp.minorAllele"/></td>
                        <td>
                            <logic:notEmpty name="snpInfo" property="snp.fxnClass">
                                <bean:write name="snpInfo" property="snp.fxnClass"/>
                            </logic:notEmpty>
                        </td>
                        <logic:iterate id="status" name="snpInfo" property="statusList">
                            <td>
                                <logic:notEmpty name="status">
                                    <logic:equal name="status" property="valid" value="true">
                                        <div title="Passed" class="ui-icon passed ui-icon-check" />
                                    </logic:equal>
                                    <logic:notEqual name="status" property="valid" value="true">
                                        <div title="Failed" class="ui-icon failed ui-icon-closethick" />
                                    </logic:notEqual>
                                </logic:notEmpty>
                                <logic:empty name="status">
                                    <div title="Not Available" class="ui-icon na ui-icon-help" />
                                </logic:empty>
                            </td>
                        </logic:iterate>
                    </tr>
                </logic:iterate>
            </tbody>
        </table>
    </div>
</div>
<%--<tiles:insert name="ldPlotDesc" />
<div id="ldPlotModal"></div>--%>
